<template>
<div class="Search">
	<input type="text" v-model="text" :readonly="this.$props.readonly" placeholder="寻找宝贝店铺"/>
	<span @click="btn">搜索</span>
</div>
</template>

<script lang="ts">
	import {defineComponent,ref} from 'vue'
	export default defineComponent({
		props:{
			readonly:{
				type:String,
				defau:'disabled'
			}
		},
		setup(prop:any,content:any){
			var text=ref('')
			function btn(){
				content.emit('Search',text.value)
			},
			return {
				btn,
				text
			}
		}
	})
</script>

<style>
	.Search{
		width:90%;
		height:5vh;
		border: 2px solid #ff9000;
		border-radius: 20px;
		margin:auto;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		
	}
	.Search input{
		width: 80%;
		height: 100%;
		border: none;
		outline: none;
		font-size: 1em;
		padding:10px;
		box-sizing: border-box;
	}
	.Search span{
		display: inline-block;
		width: 20%;
		height: 100%;
		border:2px solid #fff;
		box-sizing: border-box;
		font-size: 0.14rem;
		color:#fff;
		background:linear-gradient(to right, #FF8D0E, #FF5000);
		text-align: center;
		line-height: 5vh;
		border-radius: 20px;
	}
</style>